<template>

    <div style="width: 1200px; margin: 0 auto; padding: 20px; border: 1px solid #e0e0e0;">
        <div style="background: #2c8cff; color: white; padding: 12px; margin-bottom: 20px; 
             font-size: 18px; font-weight: 500; text-align: center;">
            教材信息列表
        </div>
        <el-form :model="form" :rules="rules" ref="formRef" label-width="80px" class="mb-4"
            style="display: flex; align-items: center; flex-wrap: wrap;">
            <el-form-item label="课程号：" prop="course_id" style="margin-right: 20px;">
                <el-input v-model="form.teacher_id" placeholder="请输入课程号" style="width: 180px;"></el-input>
            </el-form-item>
            <el-form-item label="课程名" prop="name" style="margin-right: 340px;">
                <el-input v-model="form.name" placeholder="请输入课程名" style="width: 180px;"></el-input>
            </el-form-item>
            <el-form-item style="margin-top: 0;">
                <el-button type="primary" @click="queryTeacher" style="margin-right: 10px;">查询</el-button>
                <el-button type="success" @click="addTeacher">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="teacherList" style="width: 100%; margin-top: 10px;"
            :header-row-style="{ background: '#2c8cff', color: 'black' }">
            <el-table-column prop="course_id" label="课程号" width="100"></el-table-column>
            <el-table-column label="学院">
                <template #default="scope">
                    {{ scope.row.college_id.name }} <!-- 直接访问嵌套字段 -->
                </template>
            </el-table-column>
            <el-table-column prop="name" label="课程名"></el-table-column>
            <el-table-column prop="credit" label="学分"></el-table-column>
            <el-table-column label="教师">
                <template #default="scope">
                    {{ scope.row.teacher_id.name }}
                </template>
            </el-table-column>
            <el-table-column label="ISBN">
                <template #default="scope">
                    {{ scope.row.college_id.course }}
                </template>
            </el-table-column>
            <el-table-column label="教材名">
                <template #default="scope">
                    {{ scope.row.college_id.course }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template #default="scope">
                    <el-button type="danger" size="small" @click="deleteTeacher(scope.row.course_id)">删除</el-button>
                    <el-button type="info" size="small" @click="editTeacher(scope.row)" class="ml-2">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
         <div class="mt-4">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
          :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" class="pagination-container" />
      </div>
    </div>
   
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import router from '@/router';
import axios from 'axios';
const teacherList = ref([]);
// 分页相关
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);
const isEdit = ref(false); // 是否为编辑状态

const form = ref({
    course_id: '',
    name: '',
    id_card: ''
});

const rules = ref({
    teacher_id: [
        { required: false, message: '请输入工号', trigger: 'blur' }
    ],
    name: [
        { required: false, message: '请输入姓名', trigger: 'blur' }
    ],
    id_card: [
        { required: false, message: '请输入身份证号', trigger: 'blur' }
    ]
});

// 查询教师方法
const queryTeacher = () => {

    axios.get('http://127.0.0.1:8000/course/list/',
            {
            params: {
                params:form.value,
                page: currentPage.value,
                pagesize: pageSize.value,
            }
        })
        .then(res => {
            console.log(res.data.data)
            teacherList.value = res.data.data
            total.value = res.data.total

        })
        .catch(err => {
            console.error(err);
        })
};

// 新增教师方法
const addTeacher = () => {
    router.push("/dashboard/courseadd")
};

// 删除教师方法
const deleteTeacher = (course_id) => {
    ElMessageBox.confirm('确定要删除该教师吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            axios.delete("http://127.0.0.1:8000/course/delete/" + course_id)
                .then(res => {
                    queryTeacher()
                    console.log(res)
                })
                .catch(err => {
                    console.error(err);
                })
        })
        .catch(() => { // 点击“取消”的逻辑
            ElMessage.info('取消删除');
        });
};

// 编辑教师方法
const editTeacher = (course) => {
    router.push({
        path: "/dashboard/teacherupdate",
        query: { id: course.course_id }
    }
    )


};

onMounted(() => {
    queryTeacher()
    // 初始化操作
});

onUnmounted(() => {
    // 组件卸载操作
});

// 分页处理
function handleSizeChange(newSize) {
  pageSize.value = newSize;
  queryTeacher();
}

function handleCurrentChange(newPage) {
  currentPage.value = newPage;
  queryTeacher();
}

</script>
